<template>
<ul class="list">
	<li class="item" 
		v-for="(item,index) of letters" 									
		:key="item"
		v-on:click="handleLetterClick(index,$event)"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
		:ref="item"
	>
									{{item}}
	</li>

</ul>
	
</template>

<script>
	export default {
	name: 'CityAlphabet',
	props: {
		cities: Object
	},
	computed: {
		//定义一个存储字母的数组
		letters () {
			const letters = [];
			for(let i in this.cities) {
				letters.push(i)
			}
			return letters
			
		}
	},
	data(){
	return {
		AlphabetIndex:0,
		touchStatus: false,
		startY:0,
		timer: null //性能优化，函数节流参数
	}
},
upated () {
	this.startY = this.$refs['A'][0].offsetTop
	//
},
	methods: {
		handleLetterClick(index,event) {
			
			this.$emit('change',event.target.innerText);
			
			//手指点击右侧字母列表，同步左侧城市列表功能
			//索引求值法
			this.AlphabetIndex= index;
			console.log(this.AlphabetIndex);
			this.$emit('setCityIndex',this.AlphabetIndex);
		},
		handleTouchStart (){
			this.touchStatus = true;
		},
		handleTouchMove(e){
			if (this.touchStatus) {
				//手指滑动字母列表功能
//				const starts = this.$refs['A'][0]
//				console.log(starts)
				
//				const startY = this.$refs['A'][0].offsetTop;
//				console.log(startY);

//函数节流
				if(this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
						const touchY = e.touches[0].clientY-79;
//				console.log(touchY);
				const index = Math.floor((touchY-this.startY)/20)
				console.log(index);
				
				if(index >= 0 && index < this.letters.length){
					//还是用自己写的 索引求值法，点击字母触发setCityIndex,再将滑动得到点的索引值传给父组件；
					this.AlphabetIndex = index;
					
					this.$emit('setCityIndex',this.AlphabetIndex)
				}
				
					
				},16)
			
			}
		},
		handleTouchEnd ()	{
			this.touchStatus = false
		}
		
	}
}
</script>

<style lang="stylus" scoped="scoped">
	@import '~styles/varibles.styl'
	
	.list
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		top: 1.58rem;
		right: 0;
		bottom: 0;
		width: .4rem;
		text-align: center;
		.item
			line-height: .44rem;
			color: $bgColor;
</style>